<template>
    <div class="wrap">
        <app-part
            :wrapbg="'bg-16c4b2'"
            :btnbg="'bg-5bd6c9'"
            :imgName="'tank2'"
        >
            <div class="first-l" slot="con">
                <div class="tank-logo"><img src="../../common/img/tank1.png"></div>
                <div class="text">
                     “产城智库”APP是国内第一款为特色小镇全产业链服
                    务的APP，坚持“垂直化、专业化、多元化”的发展思
                    路，提供优质的小镇资讯、全面的小镇名录、专业的小
                    镇智库，打造国内权威的特色小镇线上服务平台。
                </div>
            </div>
        </app-part>
        <section class="tank-app-sec bg-f9b017 p-12">
            <ul class="secord-l">
                <li v-for="item in secordCon">
                    <div class="title"><i>*</i>{{item.title}}</div>
                    <div class="con">{{item.con}}</div>
                </li>
            </ul>
            <ul class="secord-r">
                <li v-for="item in secordCon">
                    <div class="icon"></div>
                    <p>{{item.title}}</p>
                </li>
            </ul>
        </section>
        <app-part
            :wrapbg="'bg-d1ace0'"
            :btnbg="'bg-dfc5e9'"
            :imgClass="'third-r'"
            :imgName="'tank11'"
        >
            <div class="tank-text" slot="con">
                <p class="tank-p1">资讯</p>
                <p class="tank-p2">优质的小镇资讯</p>
                <div class="tank-p2"><span>动态</span><span>政策</span><span>要闻</span><span>攻略</span><span>随时获取</span></div>
            </div>
        </app-part>
        <app-part
            :wrapbg="'bg-3387f0'"
            :btnbg="'bg-70abf4'"
            :imgClass="'fourth-r'"
            :imgName="'tank12'"
        >
            <div class="tank-text" slot="con">
                <p class="tank-p1">小镇名录</p>
                <p class="tank-p2">全面的小镇名录</p>
                <div class="tank-p2"><span>产业</span><span>地区</span><span>概况</span><span>发展</span><span>一览无遗</span></div>
            </div>
        </app-part>
        <app-part
            :wrapbg="'bg-fd7a72'"
            :btnbg="'bg-fea29c'"
            :imgClass="'fivth-r'"
            :imgName="'tank13'"
        >
            <div slot="con" class="tank-text fivth-tank-text">
                <p class="tank-p1">智库</p>
                <p class="tank-p2">专业的小镇智库规划</p>
                <div class="tank-p2"><span>学习</span><span>招商</span><span>研究</span><span>立即掌握</span></div>
            </div>
        </app-part>
    </div>
</template>
<script>
import AppPart from 'base/app-part/app-part'
export default{
    data(){
        return{
            secordCon:[
                {
                    title:"政策支持",
                    con:"国家政策支持，中长期内将享受政策带来的红利。"
                },
                {
                    title:"市场需求",
                    con:"大量企业对产城规划及小镇申报有咨询需求，同时大量产业对项目有合作对接需求。"
                },
                {
                    title:"资源优势",
                    con:"中厚明德拥有多年积累下的大量企业与机构资源，同时具有强大的市场开发能力、专业的项目规划咨询能力与资源整合能力。"
                },
                {
                    title:"时机恰当",
                    con:"当前市场发展空间与机遇较大，同时在该领域中尚无相关APP产品。"
                },
                {
                    title:"共赢发展",
                    con:"汇聚地方政府、产业、开发商、合作机构等资源，未来在整条产业链中所有参与方将会有非常大的发展空间与机会。"
                }
            ]
        }
    },
    components:{
        AppPart
    }
}
</script>
<style type="text/css">
.tank-app-sec{
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}
.p-12{padding:0 12px;}
.bg-16c4b2{background-color:#16c4b2;}
.bg-fff{background-color:#fff;}
.first-l{
    width: 60%;
    height:220px;
}
.first-l .tank-logo{
    width: 100%;
    padding: 7px 0 1px 0;
    box-sizing: border-box;
}
.first-l .tank-logo img{
    width: 130px;
    height: 46px;
    display: block;
    margin:0 auto;
}
.first-l .text{
    line-height: 20px;
    margin-bottom:20px;
    color: #fff;
    opacity: 0.9;
    filter: alpha(opacity=90%);
}
.tank-downway{
    width: 60%;
    height: 120px;
}
.tank-downway .code{
    width:70px;
    height: 70px;
    margin-top:8px;
    box-shadow: 0 0 10px #f5f5f5;
    float: left;
}
.tank-downway .code img{width: 100%;}
.tank-downway .down{
    margin-left:82px;
}
.tank-downway .down a{
    width:118px;
    height: 28px;
    line-height: 28px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    display: inline-block;
    color:#fff;
    cursor: pointer;
    margin-top:11px;
    font-size: 12px;
}
.tank-downway .down a i{
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 5px 5px 3px 5px;
    float: left;
}
.tank-downway .down a:nth-child(2) i{
    width: 14px;
}
.tank-downway .down .apple i{
    background:url(../../common/img/tank4.png);
    background-size: 100% 100%;
}
.tank-downway .down .android i{
    width: 26px;
    background:url(../../common/img/tank5.png);
    background-size: 100% 100%;
}
.first-r{
    position: absolute;
    right: 4px;
    top: 24px;
}
.first-r img{
    width: 150px;
}
.bg-f9b017{background-color:#f9b017;}
.secord-l{
     float: left;
     width: 60%;
     padding:20px 0 10px 0;
     color: #fff;
}
.secord-r{float: right;width: 40%;}
.secord-l li{
    margin-bottom: 10px;
}
.secord-l li .title{
    font-size: 16px;
    margin-bottom: 7px;
}
.secord-l li .title i{
    color:#a30036;
    font-size: 18px;
    font-style: normal;
    display: inline-block;
    margin:4px 10px 0 0;
    float: left;
}
.secord-l li .con{
    display: inline-block;
    line-height: 22px;
    margin-left: 17px;
    font-size: 14px;
}
.secord-r li{
    width: 100px;
    margin:0 auto;
}
.secord-r li .icon{
    width: 64px;
    height: 64px;
    display: block;
    margin:17px auto 6px auto;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.secord-r li p{
    line-height: 20px;
    text-align: center;
    color: #fff;
}
.secord-r li:nth-child(1) .icon{
    background:#fff url(../../common/img/tank6.png);
    background-size: 100% 100%;
}
.secord-r li:nth-child(2) .icon{
    background:#fff url(../../common/img/tank7.png);
    background-size: 100% 100%;
}
.secord-r li:nth-child(3) .icon{
    background:#fff url(../../common/img/tank8.png);
    background-size: 100% 100%;
}
.secord-r li:nth-child(4) .icon{
    background:url(../../common/img/tank9.png);
    background-size: 100% 100%;
}
.secord-r li:nth-child(5) .icon{
    background:url(../../common/img/tank10.png);
    background-size: 100% 100%;
}

.bg-d1ace0{
    background-color: #d1ace0;
}
.bg-5bd6c9{background-color:#5bd6c9; }
.bg-dfc5e9{background-color:#dfc5e9;}
.tank-text{
    width:50%;
    height:210px;
    color: #fff;
    box-sizing: border-box;
    padding:60px 0 50px 0;
}
.tank-p1{
    font-size: 16px;
    margin-bottom:10px;
}
.tank-p2{
    line-height: 24px;
}
.tank-p2 span{margin-right: 8px;}
.third-r{
    right: 10px;
}
.third-r img{width: 164px;}
.bg-3387f0{background-color:#3387f0;}
.bg-70abf4{background-color:#70abf4;}
.bg-fd7a72{background-color:#fd7a72; }
.bg-fea29c{background-color:#fea29c;}
.fourth-r{right:-1px;}
.fourth-r img{width: 158px;}
.fivth-tank-text{width: 42%;}
.fivth-r{right:0px;}
.fivth-r img{width: 236px;}

</style>
